<template>
	<view class="detail">
		<view class="baseInfos">
			<view class="itemone">
				<view class="">
					{{info.nickName}}
				</view>
				<!-- {{info.cardTypeCode}} -->
				<view class="tags" v-if="info.cardTypeCode=='101'">
					{{info.cardTypeName}}
				</view>
				<image v-else :src="GetcardTypeCodeColor(info)" mode=""></image>
			</view>
			<view class="itemSame">
				<view class="left">
					ID
				</view>
				<view class="right">
					
					<view @click="copyTextToClipboard(info.memberNo)" class="value">
						{{info.memberNo}}
						<image class="copy" src="https://oss.6mate.cn/mini/icon_copy.png"
							mode=""></image>
					</view>
				</view>
			</view>
			<view class="itemSame">
				<view class="left">
					性别
				</view>
				<view class="right">
					{{info.genderName}}
				</view>
			</view>
			<view class="itemSame">
				<view class="left">
					手机号
				</view>
				<view class="right">
					
					{{info.mobile}}
					
					
				</view>
			</view>
			<view class="itemSame">
				<view class="left">
					区域
				</view>
				<view class="right">
					{{info.province+info.city}}
				</view>
			</view>
			<view class="itemSame">
				<view class="left">
					注册时间
				</view>
				<view class="right">
					{{info.registerTime}}
				</view>
			</view>
		<!-- 	<view v-if="info.cardTypeCode!='101'" class="itemSame">
				<view class="left">
					开通时间
				</view>
				<view class="right">
					{{info.registerTime}}
				</view>
			</view> -->
			<view v-if="info.cardTypeCode!='101'" class="itemSame">
				<view class="left">
					到期时间
				</view>
				<view class="right">
					{{info.vipExpireTime}}
				</view>
			</view>
			<view class="itemSame">
				<view class="left">
					剩余红娘服务次数
				</view>
				<view class="right">
					{{info.serviceCountBalance}}
				</view>
			</view>
			<view class="handleBtn">
				<view class="item1">
					<!-- <image src="https://oss.6mate.cn/mini/Share.png" mode=""></image>
					<view class="">分享</view>
					<button open-type="share" id="shareBtn"></button> -->
				</view>
				<view class="btns">
					<view class="phone" @click="call(info,'call')">
						<image src="https://oss.6mate.cn/mini/phone.png" mode=""></image>
					</view>
					
					<view v-if="[102,103,104,105,106,107].includes(info.cardTypeCode)" class="btns">
						<view @click="activateMembershipFn(info,2,'续费')" class="xufei">
							续费
						</view>
						<view @click="activateMembershipFn(info,1,'升级')"  class="shengji">
							升级
						</view>
					</view>
					<view v-if="[108,109].includes(info.cardTypeCode)" class="btns">
						<view @click="activateMembershipFn(info,2,'续费')" class="xufei">
							续费
						</view>
					</view>
					<view v-if="info.cardTypeCode==101 ||info.isVip=='0'" class="btns">
						<view @click="upgradationFn(info)" class="kaitong">
							开通
						</view>
					</view>
				</view>

			</view>

		</view>
		<view class="gap">
			
		</view>
		
		<view v-if="info && info.note" class="step">
			<view class="info">
				<view class="name">
					<image src="https://oss.6mate.cn/mini/Permissions.png" mode=""></image>
					客户简介
				</view>
			</view>
			<view class="intro" style="margin-bottom: 0;">
				<view style="display: flex; padding-bottom: 20rpx;">
					<view class="words">
						{{info.note}}
					</view>
				</view>
			</view>
		</view>
		<view class="step">
			<view class="info">
				<view class="name">
					<image src="https://oss.6mate.cn/mini/Permissions.png" mode=""></image>
					客户照片
				</view>
				<view class="more" @click="khzptoggleCollapse">
					{{ khzpisCollapsed ? '展开' : '收起' }}
				</view>
			</view>
			<view style="margin-top: 0; margin-bottom: 0; " class="intro" :class="{ collapsed: khzpisCollapsed }">
				<view class="photos" style="padding-bottom: 20rpx;">
					<u-upload :disabled="false" :deletable="false" :width="148" :height="148" :show-progress="false"
						:max-count="maxCount" :file-list="fileList"></u-upload>
				</view>
			</view>
		</view>
		<view class="step" style="padding-bottom: 0;">
			<view class="info">
				<view class="name">
					<image src="https://oss.6mate.cn/mini/User.png" mode=""></image>
					个人信息
				</view>
				<view class="more" @click="grxxtoggleCollapse">
					{{ grxxisCollapsed ? '展开' : '收起' }}
				</view>
			</view>
			<view class="intro" :class="{ collapsed: grxxisCollapsed }">
		
				<baseInfo :info="info.nameValueDtoList" />
		
		
			</view>
		</view>
		<view class="step" >
			<view class="info">
				<view class="name">
					<image src="https://oss.6mate.cn/mini/Oval-love-two.png" mode=""></image>
					期望另一半信息
				</view>
				<view class="more" @click="lybtoggleCollapse">
					{{ lybisCollapsed ? '展开' : '收起' }}
				</view>
			</view>
			<view class="intro" style="border-bottom: none;" :class="{ collapsed:lybisCollapsed }">
				<infoForOther :info="info.memberHope" />

			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		shareMixins
	} from "../../common/share.js"
	import CryptoJS from '../../node_modules/crypto-js/crypto-js.js'
	import infoForOther from '../crm/components/infoForOther.vue'
	import baseInfo from "../crm/components/baseInfo.vue"
	import transferToApp from '../crm/components/transferToApp.vue'
	export default {
		components: {
			infoForOther,
			baseInfo,
			transferToApp
		},
		mixins: [shareMixins],
		data() {
			return {
				attributes:'',
				bgColor:'',
				curPhone:'',
				shareMixins: {
					path: '/subPack/app/detail'
					// '/pages/index/index?id=1' // 分享的页面路径
				},
				curId: '',
				curPhone: '',
				transferPhone: '',
				maxCount: 3,
				info: {},
				transferToAppMask: false,
				// action: 'http://www.example.com/upload',
				index: 0,
				grxxisCollapsed: false,
				khzpisCollapsed: false,
				lybisCollapsed: false,
				remarkisCollapsed: false,
				showElement: false,
				fileList:[]
			}
		},
		onLoad(e) {
			this.attributes =e.attributes
			this.bgColor = e.bgColor
			this.shareMixins.path = `/subPack/app/detail?id=${e.id}`
			this.$u.api.memberdetail({
					memberId: e?.id
				})
				.then(res => {
					this.info = res?.data
					this.fileList = res?.data?.images?.map(r => {
						return {url: r}
					})
					this.maxCount = this.fileList?.length
				});
		},
		onPageScroll(e) {
			if (e.scrollTop >= 100) {
				this.showElement = true;
			} else {
				this.showElement = false;
			}
		},
		methods: {
			copyTextToClipboard(text) {
				uni.setClipboardData({
					data: text,
					success: function() {
						console.log('复制成功');
						// 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000,
						});
					},
					fail: function() {
			
						// 可以添加错误处理或用户友好的提示
					}
				});
			},
			// 会员类型
			GetcardTypeCodeColor(item){
				if(item.cardTypeCode=='101' ){
					return ''
				}else if(item.cardTypeCode=='102' ||item.cardTypeCode=='103' ){
					return 'https://oss.6mate.cn/mini/basevip.png'
				}else if(item.cardTypeCode=='104' ||item.cardTypeCode=='105' ){
					return 'https://oss.6mate.cn/mini/huangjinvip.png'
				}else if(item.cardTypeCode=='106' ||item.cardTypeCode=='107' ){
					return 'https://oss.6mate.cn/mini/baijinvip.png'
				}else if(item.cardTypeCode=='108' ||item.cardTypeCode=='109' ){
					return 'https://oss.6mate.cn/mini/zuanshivip.png'
				}
			},
			// 开通会员
			activateMembershipFn(item,type){
				
				uni.navigateTo({
					url: `/subPack/app/upgradation?id=${item.id}&nickName=${item.nickName}&photo=${item.portrait}&attributes=${this.attributes}&bgColor=${this.bgColor}&cardTypeName=${item.cardTypeName}&type=${type}`
					
					// url: "/subPack/app/upgradation"
				})
				
			},
			// 升级会员
			
			upgradationFn(item){
				console.log(item,8888888);
				uni.navigateTo({
					url: `/subPack/app/activateMembership?id=${item.id}&nickName=${item.nickName}&photo=${item.portrait}&attributes=${this.attributes}&bgColor=${this.bgColor}&cardTypeName=${item.cardTypeName}&type=0`
					
					// url: "/subPack/app/activateMembership"
				})
			},
			

			decryptDES(ciphertext, key) {
				const keyHex = CryptoJS.enc.Utf8.parse(key);
				const decrypted = CryptoJS.DES.decrypt({
					ciphertext: CryptoJS.enc.Hex.parse(ciphertext)
				}, keyHex, {
					mode: CryptoJS.mode.ECB,
					padding: CryptoJS.pad.Pkcs7
				});

				return decrypted.toString(CryptoJS.enc.Utf8);
			},
			call(val,type) {
				let publicKey =
					`MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDEPqHavyfprY52X/RFbuTq8qz9rLnbGPYMTgKZNL2dAp+1lj0zuwJyPf35/Icu1iO0iFps8lJ089oNCJNh1FXKs+sje0bXQIxFr0axmKtaeWzErD/9Iv5hvq01s1sPjZ3x4fvCvStue2rbXlWbm+PmtVssjsBbMajkbgghmM2RwQIDAQAB`

				this.$u.api
					.getmembermobile({
						memberId: val.id
					})
					.then((res) => {
						let {
							decryptMobile,
							desenMobile
						} = res.data

						let phoneNumber = this.decryptDES(decryptMobile, publicKey)
						// this.curPhone = phoneNumber

						if(type){
							uni.makePhoneCall({
								phoneNumber: phoneNumber, // 电话号码
								success: function() {
									console.log('拨打电话成功');
								},
								fail: function() {
									console.log('拨打电话失败');
								}
							});
						}
						
					});

			},
			copyTextToClipboard(text) {
				uni.setClipboardData({
					data: text,
					success: function() {
						console.log('复制成功');
						// 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000
						});
					},
					fail: function() {
						console.log('复制失败');
						// 可以添加错误处理或用户友好的提示
					}
				});
			},
			grxxtoggleCollapse() {
				this.grxxisCollapsed = !this.grxxisCollapsed;
			},
			khzptoggleCollapse() {
				this.khzpisCollapsed = !this.khzpisCollapsed;
			},
			lybtoggleCollapse() {
				this.lybisCollapsed = !this.lybisCollapsed;
			},
			remarktoggleCollapse() {
				this.remarkisCollapsed = !this.remarkisCollapsed;
			},
		}
	}
</script>

<style scoped lang="scss">
	.detail {
		padding: 0 0 30rpx;
		.tags {
			font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
			font-weight: 400;
			font-size: 20rpx;
			margin-left: 8rpx;
			line-height: 20rpx;
			padding: 4rpx 10rpx;
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			color: #0F1417;
			background: #EDEFF0;
			}

		.baseInfos {
			padding: 0 32rpx;
			.itemone {
				margin-bottom: 16rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 500;
				font-size: 32rpx;
				color: #0F1417;
				line-height: 38rpx;

				image {
					width: 182rpx;
					height: 40rpx;
				}
			}

			.itemSame {
				margin-bottom: 16rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 28rpx;
					color: #0F1417;
					line-height: 33rpx;
				}

				.right {
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 28rpx;
					color: rgba(15, 20, 23, 0.6);
					line-height: 33rpx;
					display: flex;
					align-items: center;
					
					.copy {
						width: 20rpx;
						height: 20rpx;
						margin-left: 10rpx;
					}
				}
			}

			.handleBtn {
				margin-bottom: 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.item1 {
					// flex: 1;
					display: flex;
					align-items: center;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					position: relative;

					#shareBtn {
						width: 100%;
						height: 100%;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						opacity: 0;
					}

					view {
						font-weight: 400;
						font-size: 28rpx;
						color: #5C6B8B;
						line-height: 40rpx;
					}

					image {
						width: 28rpx;
						height: 28rpx;
						margin-right: 8rpx;
					}
				}
				.btns{
					display: flex;
					align-items: center;
					justify-content: flex-end;
					
					
						display: flex;
						align-items: center;
						>view{
							display: flex;
							align-items: center;
							justify-content: center;
						}
						.xufei{
							width: 120rpx;
							height: 64rpx;
							border-radius: 40rpx 40rpx 40rpx 40rpx;
							border: 2rpx solid #D9D9D9;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 28rpx;
							color: #0F1417;
							line-height: 40rpx;
							margin-right: 16rpx;
						}
						.shengji{
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 28rpx;
							color: #FA4A53;
							line-height: 40rpx;
							width: 120rpx;
							height: 64rpx;
							background: #FFFFFF;
							border-radius: 72rpx 72rpx 72rpx 72rpx;
							border: 2rpx solid #FA4A53;
						}
						.kaitong{
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 28rpx;
							color: #FFFFFF;
							line-height: 40rpx;
							width: 120rpx;
							height: 64rpx;
							background: #FA4A53;
							border-radius: 72rpx 72rpx 72rpx 72rpx;
							border: 2rpx solid #FA4A53;
						}
					
					.phone {
						margin-right: 16rpx;
						image {
							width: 64rpx;
							height: 64rpx;
						}
					}
					
				}
			}
		}
		.gap{
		// width: 750rpx;
		height: 28rpx;
		background: linear-gradient( 180deg,#F6F7F9 0%, rgba(0,0,0,0) 100%);
		}

		

		.step {
			
			padding: 0 32rpx 24rpx; 

			.info {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.name {
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 500;
					font-size: 28rpx;
					color: #FA4A53;
					line-height: 40rpx;
					display: flex;
					align-items: center;


					image {
						width: 28rpx;
						height: 28rpx;
						margin-right: 8rpx;
					}
				}

				.more {
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 28rpx;
					color: #5C6B8B;
					line-height: 33rpx;
				}

			}

			.open {
				margin-bottom: 24rpx;
				margin-top: 20rpx;

				.openstatus {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 28rpx;
					color: #0F1417;
					line-height: 33rpx;

					text {}
				}

				.tips {
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 20rpx;
					color: rgba(15, 20, 23, 0.4);
					line-height: 23rpx;
					margin-top: 14rpx;
				}
			}

			.intro {
				overflow: hidden;
				transition: max-height 0.3s ease-out;
				max-height: 1000px;
				/* 一个足够大的值，表明默认展开 */
				margin-bottom: 24rpx;
				border-bottom: 1rpx solid rgba(245, 245, 245, 1);
				margin-top: 8rpx;
				.words {
					flex: 1;
					// margin-right: 40rpx;
					text-align: justify;
				}
				.phone {
					image {
						width: 64rpx;
						height: 64rpx;
					}
				}
				.itemCont{
					.li{
						display: flex;
						align-items: center;
					}
				}
			}
			.collapsed {
				max-height: 0;
				/* 当条件类collapsed生效时，内容收起 */
			}
		}
	}

	// .list {
	// 	.item {
	// 		padding: 24rpx 0;
	// 		margin-bottom: 24rpx;
	// 		background: #FFFFFF;
	// 		border-radius: 16rpx 16rpx 16rpx 16rpx;

	// 		.tops {
	// 			display: flex;
	// 			align-items: center;
	// 			justify-content: space-between;

	// 			.left {
	// 				display: flex;
	// 				align-items: center;

	// 				.photo {
	// 					border-radius: 50%;
	// 					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
	// 					font-weight: 500;
	// 					font-size: 28rpx;
	// 					color: #FFFFFF;
	// 					line-height: 33rpx;
	// 					width: 72rpx;
	// 					height: 72rpx;
	// 					background: #419FF5;
	// 					margin-right: 16rpx;
	// 					display: flex;
	// 					align-items: center;
	// 					justify-content: center;

	// 					&.girl {
	// 						background: #F54141;
	// 					}
	// 				}

	// 				.names {
	// 					flex: 1;

	// 					.name {
	// 						display: flex;
	// 						align-items: center;

	// 						.fullname {
	// 							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
	// 							font-weight: 500;
	// 							font-size: 28rpx;
	// 							color: #0F1417;
	// 							line-height: 33rpx;
	// 						}

	// 						.phone {
	// 							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
	// 							font-weight: 400;
	// 							font-size: 24rpx;
	// 							color: #0F1417;
	// 							line-height: 36rpx;
	// 							margin: 0 16rpx;
	// 						}

	// 						.copy {
	// 							color: rgba(15, 20, 23, 0.6);
	// 							background: #F6F6F6;
	// 							line-height: 1;
	// 							padding: 8rpx 16rpx;
	// 							border-radius: 86rpx 86rpx 86rpx 86rpx;
	// 						}
	// 					}

	// 					.code {
	// 						margin-top: 2rpx;
	// 						color: rgba(15, 20, 23, 0.6);
	// 					}
	// 				}
	// 			}

	// 			.right {
	// 				.status {
	// 					width: 132rpx;
	// 					height: 54rpx;
	// 					background: #6F7274;
	// 					border-radius: 140rpx 140rpx 140rpx 140rpx;
	// 					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
	// 					font-weight: 500;
	// 					font-size: 28rpx;
	// 					color: #FFFFFF;
	// 					line-height: 33rpx;
	// 					display: flex;
	// 					align-items: center;
	// 					justify-content: center;

	// 					&.app {
	// 						background: #1BAB6B;
	// 					}

	// 					&.doing {
	// 						background: #1767DE;
	// 					}
	// 				}

	// 			}
	// 		}
	// 	}
	// }
</style>
